//预约练车
<template>
	<view>
		<view class="userMsg">
			<view class="header">
				<view class="name">
					<view class="text">姓名</view>
					<input type="text" placeholder="请输入姓名">
				</view>
				<view class="phone">
					<view class="text">手机号码</view>
					<input type="number" placeholder="请输入手机号">
				</view>
				<view class="type">
					<view class="text">驾照类型</view>
					<picker mode="selector" :range="typeName" @change="changeType" class="typeChoose">
						<view>{{type}}</view>
					</picker>
				</view>
				<view class="course">
					<view class="text">练车科目</view>
					<picker mode="selector" :range="courseType" @change="chooseCourse" class="courseChoose">
						<view>{{course}}</view>
					</picker>
				</view>
			</view>

			<view class="body">
				<view class="isShuttle">
					<view class="title">是否接送</view>
					<switch :checked="isShuttle" color="#29c563" style="transform:scale(0.8)" @change="shuttle" />
				</view>

				<view class="practiceTime">
					<view class="text">
						练车时间
					</view>
					<picker mode="selector" :range="practiceTime" @change="chooseTime" :value="timeIndex"
						class="chooseTime ">
						<view>{{practiceTime[timeIndex]}}</view>
					</picker>
				</view>

				<view class="shuttleTime" v-if="isShuttle">
					<view class="text">接送时间</view>
					<picker mode="selector" :range="shuttleTime" @change="chooseShuttleTime" class="shuttle">
						<view>{{shuttleTime[shuttleIndex]}}</view>
					</picker>
				</view>
				<button>确定</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShuttle: false,
				type: '请选择驾照类型',
				typeName: ['c1(小车)', 'c2(小车)', 'c3(小车)', 'A2(货车)', 'B2(货车)', 'A1(客车)', 'A3(客车)', 'B1(客车)', 'D(摩托车)',
					'E(摩托车)', 'F(摩托车)'
				],
				timeIndex: 0,
				shuttleIndex: 0,
				course: '请选择练车科目',
				practiceTime: ['请选择练车时间', '7月28日14:00到17:00', '7月29日14:00到17:00', '7月30日14:00到17:00', '7月31日14:00到17:00'],
				shuttleTime: ['请选择接送时间', '7月28日14:00', '7月29日14:00'],
				courseType: ['科目一', '科目二', '科目三', '科目四'],
			}
		},
		methods: {
			//选择驾照类型
			changeType(e) {
				this.type = this.typeName[e.detail.value]
			},
			//选择练车时间
			chooseTime(e) {
				this.timeIndex = e.detail.value
			},
			//选择练车科目
			chooseCourse(e) {
				this.course = this.courseType[e.detail.value]
			},
			//选择接送时间
			chooseShuttleTime(e) {
				this.shuttleIndex = e.detail.value
			},
			shuttle() {
				this.isShuttle = !this.isShuttle
			}
		}
	}
</script>

<style>
	page {
		background-color: #f2f3f5;
	}

	/* 上半部分start */
	.userMsg .header {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;
		padding: 50rpx 0;
		background: #ffffff;
	}

	.text {
		box-sizing: border-box;
		padding-left: 30rpx;
		width: 172rpx;
		height: 90rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: left;
		color: #666666;
		line-height: 90rpx;
		/* 	background-color: skyblue;
	border-radius: 8rpx; */
	}

	.name,
	.phone,
	.type,
	.course {
		display: flex;
		width: 690rpx;
		height: 90rpx;
		margin-top: 30rpx;
		background: #f2f2f2;
		border-radius: 8rpx;
	}

	.name input,
	.phone input {
		/* 		background-color: pink; */
		height: 100%;
		width: 578rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: left;
		color: #999999;
	}

	.typeChoose,
	.courseChoose {
		width: 578rpx;
		height: 100%;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: left;
		color: #999999;
		line-height: 90rpx;
		/* background-color: pink; */
	}

	/* 上半部分end */


	/* 下半部分start */

	.body {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
		padding: 40rpx 0;
		height: 750rpx;
		background-color: #ffffff;
	}


	.isShuttle {
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		padding: 0 30rpx 10rpx;
	}

	.isShuttle .title {
		width: 128rpx;
		height: 100%;
		font-size: 32rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: left;
		color: #333333;
		line-height: 60rpx;
	}

	.practiceDate,
	.practiceTime,
	.shuttleTime {
		display: flex;
		width: 690rpx;
		height: 90rpx;
		margin-top: 30rpx;
		background: #f2f2f2;
		border-radius: 8rpx;
	}



	.chooseTime,
	.shuttle {
		width: 578rpx;
		height: 100%;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: left;
		color: #999999;
		line-height: 90rpx;
	}

	button {
		position: absolute;
		top: 520rpx;
		font-size: 32rpx;
		color: #fff;
		width: 580rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: linear-gradient(134deg, #54d685, #29c563 99%);
		border-radius: 45rpx;
	}

	/* 下半部分end */
</style>
